var myChart7;
var myChart9;
$(function () {

    char7();
	char9();

	$("#search_button").click(function(){
		$.post("http://127.0.0.1:5000/flowPredict ",
		{
			content:$("#input_content").val()
		},
		function(data,status){
            var option7=myChart7.getOption();
			option7.xAxis[0].data=data.dateTime1
			option7.title[0].text=data.title
			option7.series[0].data=data.hourIn
			option7.series[1].data=data.hourOut
			myChart7.setOption(option7,true)

            var option9=myChart9.getOption();
			option9.xAxis[0].data=data.dateTime2
			option9.title[0].text=data.title
			option9.series[0].data=data.minuteIn
			option9.series[1].data=data.minuteOut
			myChart9.setOption(option9,true)

            if(data.isLine){
                $("#linesName").text("线路名：");
            }else{
                $("#linesName").text("站点名：");
            }
            $("#linesNameData").text(data.title);
			$("#linesNameData").text(data.title);
			$("#inTotalData").text(data.inTotal);
			$("#outTotalData").text(data.outTotal);
			$("#amTopInData").text(data.amTopIn);
			$("#pmTopInData").text(data.pmTopIn);
			$("#amTopOutData").text(data.amTopOut);
			$("#pmTopOutData").text(data.pmTopOut);
		}
		);
	}
	);

})

//统计分析图
function char7() {
    myChart7 = echarts.init($("#char7")[0]);
    var option = {
        title : {
            show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '',
            x:'70',
            y:'0',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                color:'#ffffff',
                fontSize: 18,
                fontStyle: 'normal',
                fontWeight: 'normal'
            },

        },
        tooltip: {
            trigger: "axis",
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: "12",
            },
        },
        grid: {
            left: "10",
            right: "40",
            top: "30",
            bottom: "10",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            data: [

            ],
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, .2)",
                    },
                },
            },
        },],
        yAxis: [{
            type: "value",
            // 去除刻度线
            axisTick: {
                show: false,
            },
            // y轴的线颜色
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                },
            },
            // 文字的颜色
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, .1)",
                    },
                },
            },
        },],
        series: [{
            name: "进站客流",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
                color: "#0184d5",
                width: 2,
            },
            areaStyle: {
                // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, [{
                        offset: 0,
                        color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                    },
                    {
                        offset: 0.8,
                        color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                    },
                ],
                    false
                ),
                // 影子效果
                shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点形状
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 刚开始时不显示拐点，鼠标经过才显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            data: [

            ],
        },
        {
            name: "出站客流",
            type: "line",
            smooth: true,
            lineStyle: {
                normal: {
                    color: "#00d887",
                    width: 2,
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)",
                        },
                        {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)",
                        },
                    ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [

            ],
        },

        ],
    };
    myChart7.setOption(option,true);
    // 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart7.resize();
    })

    return myChart7

}


function char9() {
    myChart9 = echarts.init($("#char9")[0]);
    var option = {
        title : {
            show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '',
            x:'70',
            y:'0',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                color:'#ffffff',
                fontSize: 18,
                fontStyle: 'normal',
                fontWeight: 'normal'
            },

        },
        tooltip: {
            trigger: "axis",
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: "12",
            },
        },
        grid: {
            left: "10",
            right: "40",
            top: "30",
            bottom: "10",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            data: [

            ],
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, .2)",
                    },
                },
            },
        },],
        yAxis: [{
            type: "value",
            // 去除刻度线
            axisTick: {
                show: false,
            },
            // y轴的线颜色
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                },
            },
            // 文字的颜色
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, .1)",
                    },
                },
            },
        },],
        series: [{
            name: "进站客流",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
                color: "#0184d5",
                width: 2,
            },
            areaStyle: {
                // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, [{
                        offset: 0,
                        color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                    },
                    {
                        offset: 0.8,
                        color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                    },
                ],
                    false
                ),
                // 影子效果
                shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点形状
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 刚开始时不显示拐点，鼠标经过才显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            data: [

            ],
        },
        {
            name: "出站客流",
            type: "line",
            smooth: true,
            lineStyle: {
                normal: {
                    color: "#00d887",
                    width: 2,
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)",
                        },
                        {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)",
                        },
                    ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [

            ],
        },

        ],
    };
    myChart9.setOption(option,true);
    // 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart9.resize();
    })

    return myChart9

}